<template>
  <div class="container account">
    <UserSidebar />
    <div class="account-frame">
      <div class="user-frame">
        <div class="user-panel">
          <div class="user-fast">
            <img class="user-img" src="@/assets/imgs/photo.png" />
          </div>
          <div class="vips-frame" v-if="userInfo.grade">
            <img class="grade-img" src="@/assets/imgs/img1.png" />
            <span class="grade">{{ userInfo.grade.weight }}</span>
          </div>
          <p class="name">{{ userInfo.nick_name }}</p>
        </div>
        <div
          class="info-frame"
          :style="
            !isMobile ? 'border-left:1px solid #C1BEBD;margin-left:1.5rem' : ''
          "
        >
          <div class="top-frame">
            <div class="top-panel">
              <p class="label">Blog</p>
              <p class="text">{{ myBlog.total }}</p>
            </div>
            <div class="top-panel">
              <p class="label">Evaluate</p>
              <p class="text">{{ myEvaluate.total }}</p>
            </div>
            <div class="top-panel">
              <p class="label">Comment</p>
              <p class="text">{{ myComment.total }}</p>
            </div>
          </div>
          <div
            class="bottom-frame"
            :style="!isMobile ? 'border-top:1px solid #C1BEBD' : ''"
          >
            <div class="bottom-panel">
              <div class="panel-title">
                <span>Experience</span>
                <div class="icon-panel ac-bg" @click="clickDetail">
                  <van-icon name="search" size="0.8rem" />
                </div>
              </div>
              <p class="panel-num">{{ parseInt(userInfo.experience) }}</p>
            </div>
            <div class="bottom-panel">
              <div class="panel-title">
                <span>Points</span>
                <div class="icon-panel ac-bg" @click="clickDetail">
                  <van-icon name="search" size="0.8rem" />
                </div>
              </div>
              <p class="panel-num">{{ parseFloat(userInfo.point) }}</p>
            </div>
          </div>
          <div class="_sign">
            <div class="sign-frame" @click="clickSignIn">
              <p v-if="!isSignIn">SIGN IN TODAY</p>
              <p v-else>
                <span>SIGNED IN</span>
                <van-icon name="passed" color="green" />
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="answer-frame">
        <el-tabs v-model="activeName">
          <el-tab-pane label="My blog" name="0">
            <div class="answer-panel" @scroll="blogScroll" ref="blogPanel">
              <div
                class="answer-fast"
                v-for="(item, index) in myBlog.list"
                :key="'blog' + index"
              >
                <div class="answer-past">
                  <p class="answer-title">
                    {{ item.title }}
                  </p>
                  <p class="answer-text">
                    {{ item.description }}
                  </p>
                  <p class="answer-time">
                    {{ item.created_at.substring(0, 10) }}
                  </p>
                </div>
                <div class="tips-frame">
                  <div class="tips-panel" v-if="item.examined == '10'">
                    <van-icon name="clock-o" class="van-icon-await" />
                    <p>Waiting</p>
                  </div>
                  <div class="tips-panel" v-if="item.examined == '30'">
                    <van-icon name="close" color="red" />
                    <p>refuse</p>
                  </div>
                  <div class="tips-panel" v-if="item.examined == '20'">
                    <van-icon name="passed" color="green" />
                    <p>passed</p>
                  </div>
                </div>
              </div>
              <DefalutLoadMore  :loadType="myBlog.loadType" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="My evaluate" name="1">
            <div
              class="answer-panel"
              @scroll="evaluateScroll"
              ref="evaluatePanel"
            >
              <div
                class="answer-fast"
                v-for="(item, index) in myEvaluate.list"
                :key="'blog' + index"
              >
                <div class="answer-past">
                  <p class="answer-title">
                    {{ item.products[0].product_title }}
                  </p>
                  <p class="answer-text">
                    {{ item.content }}
                  </p>
                  <p class="answer-time">
                    {{ item.created_at.substring(0, 10) }}
                  </p>
                </div>
                <div class="tips-frame">
                  <div class="tips-panel" v-if="item.status == '10'">
                    <van-icon name="clock-o" class="van-icon-await" />
                    <p>Waiting</p>
                  </div>
                  <div class="tips-panel" v-if="item.status == '30'">
                    <van-icon name="close" color="red" />
                    <p>refuse</p>
                  </div>
                  <div class="tips-panel" v-if="item.status == '20'">
                    <van-icon name="passed" color="green" />
                    <p>passed</p>
                  </div>
                </div>
              </div>
              <DefalutLoadMore :loadType="myBlog.loadType" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="My comments" name="2">
            <div
              class="answer-panel"
              @scroll="commentScroll"
              ref="commentPanel"
            >
              <div
                class="answer-fast"
                v-for="(item, index) in myComment.list"
                :key="'blog' + index"
              >
                <div class="answer-past">
                  <p class="answer-title">
                    {{ item.article[0].title }}
                  </p>
                  <p class="answer-text">
                    {{ item.content }}
                  </p>
                  <p class="answer-time">
                    {{ item.created_at.substring(0, 10) }}
                  </p>
                </div>
                <div class="tips-frame">
                  <div class="tips-panel" v-if="item.status == '10'">
                    <van-icon name="clock-o" class="van-icon-await" />
                    <p>Waiting</p>
                  </div>
                  <div class="tips-panel" v-if="item.status == '30'">
                    <van-icon name="close" color="red" />
                    <p>refuse</p>
                  </div>
                  <div class="tips-panel" v-if="item.status == '20'">
                    <van-icon name="passed" color="green" />
                    <p>passed</p>
                  </div>
                </div>
              </div>
              <DefalutLoadMore :loadType="myBlog.loadType" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="menber-frame">
        <p class="title">Membership list</p>
        <div class="menber-panel">
          <div v-loading="accountLoading"></div>
          <div
            class="menber-fast"
            v-for="(item, index) in accountList"
            :key="index + 'acc'"
            :style="
              parseInt(userInfo.grade.weight) == index
                ? 'background:#E38CFF'
                : ''
            "
          >
            <div class="menber-past">
              <div class="vips-frame">
                <img class="grade-img" src="@/assets/imgs/img1.png" />
                <span class="grade">{{ item.weight }}</span>
              </div>
              <div class="num-frame">{{ parseInt(item.upgrade) }}</div>
              <div class="name-frame">{{ item.name }}</div>
            </div>
            <div class="menber-past">
              {{ item.description }}
            </div>
          </div>
        </div>
      </div>
      <div class="accountDetails_body">
        <p>
          1. If you register as a missyeah member for the first time, you will
          get 5 points for the balance<br />
          2. Blog free, free 1 points, only once a day;<br />3. Purchase goods
          to publish evaluation, the balance of free 1 points, no limit on the
          number of times;<br />
          4. Give 0.2 points to the balance of comments on the blog, only 5
          times a day;<br />
          5. 0.1 points will be given every day when signing in, once a day;
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool";
export default {
  data() {
    return {
      tool,
      myBlog: {
        list: [],
        loadType: 2,
        total: 0,
        form: {
          page: 1,
          page_size: 20,
        },
      },
      myEvaluate: {
        list: [],
        loadType: 2,
        total: 0,
        form: {
          page: 1,
          page_size: 20,
        },
      },
      myComment: {
        list: [],
        loadType: 2,
        total: 0,
        form: {
          page: 1,
          page_size: 20,
        },
      },
      activeName: 0,
      gradeProgress: 0, //会员等级进度
      isSignIn: false, //是否可以签到
      accountList: [],
      accountLoading: true,
      banerLoading: true,
      birthdayBanner: {
        img: "",
        href: "",
      },
      dailyBanner: {
        img: "",
        href: "",
      },
    };
  },
  computed: {
    userInfo() {
      let userInfo = this.$store.state.user.userInfo;
      return userInfo;
    },
  },
  mounted() {
    //判断是否已经签到
    let userSignTime = localStorage.getItem("userSignTime" + this.userInfo.id);
    if (userSignTime) {
      if (userSignTime == tool.getLocalTimeryymmhh()) {
        this.isSignIn = true;
      } else {
        this.isSignIn = false;
      }
    }
    this.getAccountList();
    this.getMyBlogList();
    this.getMyevaluateList();
    this.getMyCommentList();
  },
  // activated() {
  //   this.getMyBlogList();
  //   this.getMyevaluateList();
  //   this.getMyCommentList();
  // },
  methods: {
    //获取会员等级列表
    async getAccountList() {
      let userInfo = null;
      let accountList = null;
      let grade = 0; //会员等级
      let experience = 0; //当前用户经验值
      let gradeProgress = 0; //会员等级进度
      let [resUser, resAccount] = await Promise.all([
        //查询用户信息
        this.$store.dispatch("user/userInfo"),
        //获取会员等级列表
        this.$store.dispatch("user/accountList"),
      ]);
      if (resUser.code == 0 && resUser.data) {
        userInfo = resUser.data;
        grade = userInfo.grade ? userInfo.grade.weight : 0;
        experience = userInfo.experience ? userInfo.experience : 0;
      }
      if (resAccount.code == 0 && resAccount.data) {
        accountList = resAccount.data.list;
        this.accountList = accountList;
        this.accountLoading = false;
      }
      for (let i = 0; i < accountList.length; i++) {
        if (accountList[i].weight == grade + 1) {
          gradeProgress = Math.round(
            (experience / parseInt(accountList[i].upgrade)) * 100
          );
        }
      }

      this.gradeProgress = gradeProgress;
    },
    //签到
    async clickSignIn() {
      if (!this.isSignIn) {
        this.tips.startLoadingToast();
        let userInfo = this.userInfo;

        let res = await this.$store.dispatch("user/signin");
        this.tips.closeToast();
        if (res.code == 0) {
          localStorage.setItem(
            "userSignTime" + this.userInfo.id,
            tool.getLocalTimeryymmhh()
          );
          this.isSignIn = true;
          userInfo.experience += 1; //经验+1
          userInfo.point += 0.1; //积分+0.1
          this.$store.commit("user/setUserInfo", userInfo); //保存登陆信息
        } else {
          localStorage.setItem(
            "userSignTime" + this.userInfo.id,
            tool.getLocalTimeryymmhh()
          );
          this.isSignIn = true;
          this.$toast(res.msg);
        }
      }
    },
    //点击详细
    clickDetail() {
      this.$router.push({
        path: "/user/infodetail",
      });
    },
    //滚动我的博客
    blogScroll(e) {
      let bool = tool.panelScrollToBottom(this.$refs.blogPanel);
      if (bool && this.myBlog.loadType == 1) {
        this.myBlog.form.page++;
        this.getMyBlogList();
      }
    },
    //获取我的博客列表
    async getMyBlogList() {
      this.myBlog.loadType = 2;
      let res = await this.$store.dispatch("user/myBlog", this.myBlog.form);
      if (res.code == 0) {
        console.log(res.data.list);
        this.myBlog.list = this.myBlog.list.concat(res.data.list);
        this.myBlog.total = res.data.paginatio.total;
        if (res.data.paginatio.total == 0) {
          this.myBlog.loadType = 4;
        } else if (res.data.list.length < this.myBlog.form.page_size) {
          this.myBlog.loadType = 3;
        } else {
          this.myBlog.loadType = 1;
        }
      }
    },
    //滚动我的评价
    evaluateScroll(e) {
      let bool = tool.panelScrollToBottom(this.$refs.evaluatePanel);
      if (bool && this.myEvaluate.loadType == 1) {
        this.myEvaluate.form.page++;
        this.getMyevaluateList();
      }
    },
    //获取我的评价列表
    async getMyevaluateList() {
      this.myEvaluate.loadType = 2;
      let res = await this.$store.dispatch(
        "user/myEvaluate",
        this.myEvaluate.form
      );
      if (res.code == 0) {
        //console.log(res);
        this.myEvaluate.list = this.myEvaluate.list.concat(res.data.list);
        this.myEvaluate.total = res.data.paginatio.total;
        if (res.data.paginatio.total == 0) {
          this.myEvaluate.loadType = 4;
        } else if (res.data.list.length < this.myEvaluate.form.page_size) {
          this.myEvaluate.loadType = 3;
        } else {
          this.myEvaluate.loadType = 1;
        }
      }
    },
    //滚动我的评论
    commentScroll(e) {
      let bool = tool.panelScrollToBottom(this.$refs.commentPanel);
      if (bool && this.myComment.loadType == 1) {
        this.myComment.form.page++;
        this.getMyCommentList();
      }
    },
    //获取我的评论列表
    async getMyCommentList() {
      this.myComment.loadType = 2;
      let res = await this.$store.dispatch(
        "user/myComments",
        this.myComment.form
      );
      if (res.code == 0) {
        this.myComment.list = this.myComment.list.concat(res.data.list);
        this.myComment.total = res.data.paginatio.total;
        if (res.data.paginatio.total == 0) {
          this.myComment.loadType = 4;
        } else if (res.data.list.length < this.myComment.form.page_size) {
          this.myComment.loadType = 3;
        } else {
          this.myComment.loadType = 1;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "account.less";
</style>